<template name="guakao">
	<view class="guakao">
		<view @click="toTop">
			<text class="iconfont icon1"></text>
		</view>
		<view @click="callFn">
			<text class="iconfont icon2"></text>
		</view>
		<view @click="map">
			<text class="iconfont icon3"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"guakao",
		data() {
			return {
				
			}
		},
		methods:{
			toTop(){
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
			},
			callFn(){
				uni.makePhoneCall({
				    phoneNumber: '114' //仅为示例
				});
			},
			map(){
				uni.navigateTo({
					url:'/pages/map/map'
				})
			}
		}
	}
</script>

<style>
@font-face {
  font-family: 'iconfont';  /* project id 1525796 */
  src: url('http://at.alicdn.com/t/font_1525796_mqn3rexaav.eot');
  src: url('http://at.alicdn.com/t/font_1525796_mqn3rexaav.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_1525796_mqn3rexaav.woff2') format('woff2'),
  url('http://at.alicdn.com/t/font_1525796_mqn3rexaav.woff') format('woff'),
  url('http://at.alicdn.com/t/font_1525796_mqn3rexaav.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_1525796_mqn3rexaav.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.guakao{
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
}

.guakao view{
  width:50px;
  height: 50px;
  background: rgba(250,250,250,0.9);
  border-radius: 50%;
  margin-top: 10px;
  text-align: center;
  line-height: 50px;
}

.icon1::after{
  content: "\e612";
}

.icon2::after{
  content: "\e601";
}
.icon3::after{
  content: "\e697";
}
	
</style>
